<template>
  <div>
    <div class="grow-box">
      <div class="grow-top-bg"></div>
      <div class="grow-box-wrap">
        <div class="growth-data-title "></div>
        <ul class="grow-data-content">
          <li class="grow-data-item " v-for="(item,index) in classType"
              @click="tabclassTest(index, item.type)"
              v-bind:class="{'active':activeIndex==index}">
            {{item.text}}
          </li>
        </ul>
        <div class="cart-box">
          <div class="grow-charts-wrap" v-bind:style="{width:growCartWidth + 'px',height:growCartWidth * 0.8 + 'px'}">
            <div id="growChart" v-bind:style="{width:growCartWidth + 'px',height:growCartWidth * 0.8 + 'px'}"
                 class="grow-charts"></div>
            <div class="data-analysis">
              <p class="data-anay-unit">
                <span class="data-anay-name ">单元</span>
                <span class="data-anay-item" v-for="i in baseData">{{i.unit}}</span>
              </p>
              <div class="data-anay-Ranking">
                <span class="data-anay-name data-anay-class-name">班级排名</span>
                <span class="data-anay-item" v-for="i in baseData">{{i.mylevel}}/{{i.total}}</span>
              </div>
            </div>
          </div>
          <div class="cart-title" v-for="(item,index) in classType">
            <div class="cart-title-type">
              <span class="cart-title-time" v-if="index == activeIndex">{{item.title.nameLine}}<i></i></span>
              <span class="cart-title-avg" v-if="index == activeIndex">{{item.title.nameBar}}<i></i></span>
            </div>
            <div class="cart-unit-text" v-if="index == activeIndex">
              单位：{{item.title.unit}}
            </div>
          </div>
        </div>
        <!--开口时长描述-->
        <div class="grow-text-descript">
          <div class="grow-text-descript-bg" v-if="textShowFlag">
            <div class="grow-text-descript-content">
              <p>开口时长包括:</p>
              <p> 1. 课上（语音测评，语音答题，人机对话，分贝能量条）</p>
              <p>2. 课下（晨读，绘本）</p>
              <p>为保证数据的准确性，建议学员上课时佩戴耳机</p>
            </div>
          </div>
        </div>
        <!--随堂测话算术-->
        <text-modal v-if="growShowFlag">
          <p slot="grow-message-tip">
            我们再往下看，最后这个部分是对孩子在中、外教课中每个单元的随堂测成绩进行的统计，为了及时的跟进和检测孩子的学习状况，我们在每次课结束之后都会进行一次随堂测试，这个图是孩子这几次的成绩和变化情况。
          </p>
          <p slot="grow-message" v-if="growData.classtest.flag ==1">
            分数偏低
            从这个统计图中可以看出，咱们孩子由于种种原因，可能整体分数不是太尽如人意。您可以和孩子也沟通一下看看孩子的困难在哪里，我这边也会多关注一下；另外咱们也不能根据几次的成绩就去否定孩子的潜力。只要引导正确、及时鼓励及反馈，孩子慢慢养成学习的好习惯，就会有所提升的，建议之后每次课后在听一下回放，总结一下，做好复习。我也会再看看孩子的测试卷错误情况，有针对性的提出建议，希望可以陪伴孩子不断进步！
          </p>
          <p slot="grow-message" v-if="growData.classtest.flag ==2">
            分数中等
            孩子这几个单元的学习效果还是很不错，基本上可以跟上大部队的步伐，非常高兴能看到她有初期的成效！只要按照咱们主讲老师和我的要求去完成，后面还能够有提升的。孩子所有的努力最终都会在习惯上、兴趣上或者成绩上有所体现的。
          </p>
          <p slot="grow-message" v-if="growData.classtest.flag ==3">
            分数较高
            从这个统计图中可以看出，咱们孩子，每个单元的成绩都处于上游，说明孩子在网校的学习效果非常的好，我特别为她开心。一分耕耘一分收获，孩子的每一次进步都是前期不断积累的结果。相信在学校，孩子的成绩应该也有所提升。但这是万里长征第一步，后面要保持这样的劲头才可以哦。
          </p>
        </text-modal>
      </div>
    </div>
  </div>
</template>
<script>
  import TextModal from '@/components/textModal'
  export default {
    props: ['growData'],
    components: {
      TextModal
    },
    data () {
      return {
        classType: [
          {
            'text': '随堂测',
            'type': 'classtest',
            'title': {
              'nameLine': '我的分数',
              'nameBar': '平均分数',
              'unit': '分数'
            }
          },
          {
            'text': '晨读',
            'type': 'mornread',
            'title': {
              'nameLine': '我的分数',
              'nameBar': '平均分数',
              'unit': '分数'
            }
          },
          {
            'text': '开口时长',
            type: 'speaktime',
            'title': {
              'nameLine': '我的时长',
              'nameBar': '平均时长',
              'unit': '分钟'
            }
          },
          {
            'text': '单词闯关',
            type: 'word',
            'title': {
              'nameLine': '我的分数',
              'nameBar': '平均分数',
              'unit': '分数'
            }
          }
        ],
        activeIndex: 0,
        growCartWidth: 0,
        baseData: [],
        textShowFlag: false,
        growShowFlag: true,
        option: {
          grid: {
            top: '36%',  // 图表在canvas 中的位置
            bottom: 10
          },
          tooltip: {
            show: true
          },
          xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4'],
            axisLine: {
              lineStyle: {
                color: 'rgb(249,105,0)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'transparent'
              }
            },
            axisLabel: {
              color: 'transparent',
              show: true,
              interval: 'auto'  // {number}
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              textStyle: {
                fontSize: '100%',
                fontWeight: 600
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgb(249,105,0)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'transparent'
              }
            }
          },
          series: [{
            symbolSize: 6,
            symbol: 'circle',
            type: 'line',
            tooltip: {
              show: false
            },
            itemStyle: {
              normal: {
                color: 'rgba(224,39,39,1)'
              }
            },
            label: {
              normal: {
                show: true,
                fontSize: '100%',
                fontWeight: 500,
                position: 'top'
              }
            }
          },
            {
              type: 'bar',
              barWidth: '30%',
              itemStyle: {
                normal: {
                  color: function (params) {  // 修改每根柱子的颜色，用的是一个颜色的数组
                    let colorList = [
                      'rgba(249,105,0,.4)',
                      'rgba(249,105,0,.6)',
                      'rgba(249,105,0,.8)',
                      'rgba(249,105,0,1)'
                    ]
                    return colorList[params.dataIndex]
                  }
                }
              },
              tooltip: {
                trigger: 'item',
                backgroundColor: '#f96900',
                formatter: function (params) {  // tooltip的样式设置
                  let tipHtml = ''
                  tipHtml = '<div class="student-grow-bar-tip-bg">' +
                    '<div class="student-grow-bar-tip-content">' +
                    '                       <span class="student-grow-tip-data">' + params.data + '</span>' +
                    '</div>' +
                    '</div>' +
                    '<div class="student-grow-bar-san">' +
                    '</div>'
                  return tipHtml
                },
                position: 'top', // 提示信息出现的位置，默认是跟随鼠标移动的
                padding: [1],
                textStyle: {
                  fontSize: 12
                }
              }
            }
          ]
        }
      }
    },
    computed: {
      classLineData () {
        return (this.baseData.map(item => {
          return item.mine
        }))
      },
      classBarData () {
        return (this.baseData.map(item => {
          return item.avg
          }))
        }
      },
      mounted () {
        this.init()
      },
      methods: {
        init () {
          this.baseData = this.growData.classtest.data
          this.option.series[0].data = this.classLineData
          this.option.series[1].data = this.classBarData
          let min = Math.floor(this.growData.classtest.min)
          // 找出最大值
          let maxAvg = Math.ceil(this.getMax(this.classLineData))
          let maxMine = Math.ceil(this.getMax(this.classBarData))
          let maxData = maxAvg >= maxMine ? maxAvg : maxMine
          this.judgeY(maxData, min)
          this.drawLine()
        },
        tabclassTest (index, type) { // 切换图表
          if (type == 'speaktime') {
            this.textShowFlag = true
          } else {
            this.textShowFlag = false
          }
          if (type == 'classtest') {
            this.growShowFlag = true
          } else {
            this.growShowFlag = false
          }
          this.activeIndex = index
          this.baseData = this.growData[type].data
          let min = Math.floor(this.growData[type].min)
          let classLineData = []
          let classBarData = []
          this.growData[type].data.map((res) => {
            classLineData.push(res.mine)
            classBarData.push(res.avg)
          })
          let maxAvg = Math.ceil(this.getMax(classBarData))
          let maxMine = Math.ceil(this.getMax(classLineData))
          let maxData = maxAvg >= maxMine ? maxAvg : maxMine
          this.option.series[0].data = classLineData
          this.option.series[1].data = classBarData
          this.judgeY(maxData, min)
          this.drawLine()
        },
        judgeY (max, item) {  // 判断图表纵坐标的值
          if (max > 100) {
            this.option.yAxis.max = max
            let min = (item - 20) > 0 ? (item - 20) : 0
            this.option.yAxis.interval = Math.ceil((max - min) / 10)
            this.option.yAxis.min = min
          } else {
            if (item > 50) {
              this.option.yAxis.min = 50
              this.option.yAxis.interval = 5
              this.option.yAxis.max = 100
            } else {
              this.option.yAxis.min = 0
              this.option.yAxis.interval = 10
              this.option.yAxis.max = 100
            }
          }
        },
        drawLine () {
          this.growCartWidth = document.documentElement.clientWidth > 750 ? 750 * 0.85 : document.documentElement.clientWidth * 0.85
          const growChartEle = document.getElementById('growChart')
          if (growChartEle) {
            // 给Echarts 赋值宽高
            this.$nextTick(() => {
              let growChart = this.$echarts.init(
                growChartEle
              )
              growChart.setOption(this.option)
              window.addEventListener('resize', function () {
                growChart.resize()
              })
            })
          }
        },
        getMax (arr) {  // 求去最大最大时长里面的最大值
          return Math.max.apply(null, arr)
        }
      }
  }
</script>
<style type="text/css">
  .student-grow-bar-tip-bg{
    padding:0 .1rem;
    height: .34rem;
    position: relative;
  }
  .student-grow-bar-tip-content{
    width: 100%;
    height:.34rem;
    background-color: #f96900;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .student-grow-tip-data{
    font-weight: 600;
    font-size: .24rem;
    display: block;
    text-align: center;
    line-height: .34rem;
  }
  .student-grow-bar-san{
    position: absolute;
    width: 0;
    height: 0;
    border-left: .1rem solid transparent;
    border-right: .1rem solid transparent;
    border-top: .1rem solid #f96900;
    left:50%;
    top:.34rem;
    transform: translate(-50%, 0);
  }
</style>
<style type="text/css" scoped>
  .data-anay-unit .data-anay-item {
    color: #f96900;
  }

  .data-anay-Ranking .data-anay-item {
    color: #666;
    height: .6rem;
    line-height: .6rem;
    vertical-align: top;
  }

  .data-anay-item {
    margin: 0 .24rem;
    display: inline-block;
    width: .8rem;
    font-size: .24rem;
    font-weight: 600;
  }

  .data-anay-Ranking .data-anay-class-name {
    height: .6rem;
    background-color: #666666;
    line-height: .26rem;
    padding: .04rem 0;
    box-sizing: border-box;
  }

  .data-anay-Ranking {
    margin-top: .06rem;
  }

  .data-anay-name {
    display: inline-block;
    width: .6rem;
    height: .34rem;
    line-height: .34rem;
    border-radius: .05rem;
    background-color: #f96900;
    text-align: center;
    color: #fff;
  }

  .data-analysis {
    width: 100%;
    text-align: left;
  }

  .grow-text-descript-content {
    text-align: left;
    padding: .2rem .4rem;
    line-height: .36rem;
    font-size: .24rem;
    font-weight: 500;
  }

  .grow-text-descript-bg {
    width: 7.08rem;
    border-radius: .12rem;
    background-color: #fffbf7;
    box-shadow: 0px 3px 5px 0px #eee;
  }

  .grow-text-descript {
    margin-top: 1.26rem;
  }

  .cart-unit-text {
    text-align: right;
    margin-right: 0.06rem;
    margin-top: 0.1rem;
  }

  .cart-title-avg > i {
    font-style: normal;
    display: inline-block;
    width: 0.63rem;
    height: 0.25rem;
    background-color: rgba(249, 105, 0, 0.8);
    vertical-align: middle;
    margin: 0 0.06rem;
  }

  .cart-title-time > i {
    font-style: normal;
    display: inline-block;
    width: 0.52rem;
    height: .02rem;
    background-color: #e02727;
    margin: 0 0.2rem 0 0.1rem;
    vertical-align: middle;
  }

  .cart-title-type,
  .cart-unit-text {
    font-size: 0.24rem;
    font-weight: 600;
    color: #555;
  }

  .cart-title {
    position: absolute;
    right: 0;
    margin-right: 0.4rem;
    top: .4rem;
  }

  .grow-charts-wrap {
    position: relative;
    margin-left: .6rem;
  }

  .cart-box {
    width: 100%;
    position: relative;
  }

  .grow-charts {
    margin: 0 auto;
  }

  .growth-data-title {
    font-size: 0.48rem;
    line-height: 0.6rem;
    margin-bottom: 30px;
  }

  .grow-data-content {
    font-size: 0.48rem;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: space-around;
    box-sizing: border-box;
  }

  .grow-data-item {
    width: 1.52rem;
    height: 0.6rem;
    text-align: center;
    line-height: 0.6rem;
    border: 1px solid #f96900;
    border-radius: 0.05rem;
    margin: 0 0.12rem;
    font-size: 0.28rem;
    color: #f96900;
    font-weight: 600;
    box-sizing: border-box;
  }

  .grow-data-item.active {
    background: linear-gradient(top, #ffdd00, #f96900);
    color: white;
    border: 0;
    box-sizing: border-box;
  }

  .growth-data-title {
    margin: 0 auto 0.4rem;
    width: 4.9rem;
    height: 0.6rem;
    background: url("../assets/img/grow_title.png") no-repeat;
    background-size: 100% 100%;
  }

  .grow-box-wrap {
    padding: 0.6rem 0.2rem;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .grow-top-bg {
    width: 100%;
    height: 0.32rem;
    background: url("../assets/img/grow_top_bg.png") no-repeat;
    background-size: 100% 100%;
  }

  .grow-box {
    background: url("../assets/img/stage_bg.png") repeat 0.14rem 0;
    background-size: 0.22rem 0.22rem;
    font-size: 0.24rem;
  }
</style>
